<template>
  <div>
    <!--<div class="Information"></div>-->
    <chart :options="option" class="tablegraphdata">123</chart>
  </div>
</template>

<script>
    export default {
      name: 'tablegraphdata',
      data () {
          return {
            option: {
              title: {
                text: '漏斗图'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
              },
              toolbox: {
                feature: {
                  dataView: {readOnly: false},
                  restore: {},
                  saveAsImage: {}
                }
              },
              legend: {
                data: ['展现', '点击', '访问', '咨询', '订单']
              },
              series: [
                {
                  name: '预期',
                  type: 'funnel',
                  left: '10%',
                  width: '80%',
                  label: {
                    normal: {
                      formatter: '{b}预期'
                    },
                    emphasis: {
                      position: 'inside',
                      formatter: '{b}预期: {c}%'
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  itemStyle: {
                    normal: {
                      opacity: 0.7
                    }
                  },
                  data: [
                    {value: 60, name: '访问'},
                    {value: 40, name: '咨询'},
                    {value: 20, name: '订单'},
                    {value: 80, name: '点击'},
                    {value: 100, name: '展现'}
                  ]
                },
                {
                  name: '实际',
                  type: 'funnel',
                  left: '10%',
                  width: '80%',
                  maxSize: '80%',
                  label: {
                    normal: {
                      position: 'inside',
                      formatter: '{c}%',
                      textStyle: {
                        color: '#fff'
                      }
                    },
                    emphasis: {
                      position: 'inside',
                      formatter: '{b}实际: {c}%'
                    }
                  },
                  itemStyle: {
                    normal: {
                      opacity: 0.5,
                      borderColor: '#fff',
                      borderWidth: 2
                    }
                  },
                  data: [
                    {value: 30, name: '访问'},
                    {value: 10, name: '咨询'},
                    {value: 5, name: '订单'},
                    {value: 50, name: '点击'},
                    {value: 80, name: '展现'}
                  ]
                }
              ]
            }
        }
      }
    }
</script>

<style scoped>
.tablegraphdata{
  /*height:500px;*/
  margin: 0 auto;
}
.Information{
  width: 99%;
  height: 60px;
  background-color: #FFFCE1;
  border: 1px solid #E0DFC9;
  color:  #EB9E05;
  font-size: 12px;
  line-height: 60px;
  margin-bottom: 30px;
 }
</style>
